<template>
	<scroll-view scroll-y class="second-menu">
		<view class="flex justify-center padding">
			<view class="text-center">
				<view class="image_medium">
					<image class="image_medium round" src="../../static/icon_logo.jpg"></image>
				</view>
				<view class="margin-top-sm">用户名称</view>
			</view>
		</view>

		<cuBar title="日历" hint="Modal" modal="3"></cuBar>
		<uni-calendar :insert="true" :lunar="tags[0].checked" :disable-before="tags[3].checked" :range="tags[5].checked"
		 :start-date="startDate" :end-date="endDate" :date="timeData.fulldate" :selected="selected" @change="change"
		 @onMonthSelect="onMonthSelect" />
		<card-case :datas="cases"></card-case>
	</scroll-view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import cuGrid from '@/components/single/grid/cu-grid.vue'
	import cuBar from '@/components/single/bar/cu-bar.vue';
	import uniCalendar from '@/components/group/uni-calendar/uni-calendar.vue';
	import cardCase from '@/components/single/card/card_case.vue';
	export default {
		components: {
			cuGrid,
			cuBar,
			uniCalendar,
			cardCase
		},
		data() {
			/**
			 * 时间计算
			 */
			function getDate(date, AddMonthCount = 0, AddDayCount = 0) {
				if (typeof date !== 'object') {
					date = date.replace(/-/g, '/');
				}
				let dd = new Date(date);
				dd.setMonth(dd.getMonth() + AddMonthCount); // 获取AddDayCount天后的日期
				dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
				let d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
				return y + '-' + m + '-' + d;
			}
			let tags = [{
					id: 0,
					name: '农历',
					checked: false,
					attr: 'lunar'
				},
				{
					id: 1,
					name: '开始日期(' + getDate(new Date(), -1) + ')',
					checked: false,
					value: getDate(new Date(), -1),
					attr: 'startDate'
				},
				{
					id: 2,
					name: '结束日期(' + getDate(new Date(), 2) + ')',
					value: getDate(new Date(), 2),
					checked: false,
					attr: 'endDate'
				},
				{
					id: 3,
					name: '禁用今天之前的日期',
					checked: false,
					attr: 'disableBefore'
				},
				{
					id: 4,
					name: '自定义当前日期(' + getDate(new Date(), 1) + ')',
					value: getDate(new Date(), 1),
					checked: false,
					attr: 'date'
				},
				{
					id: 5,
					name: '范围选择',
					checked: false,
					attr: 'range'
				},
				{
					id: 6,
					name: '打点',
					value: [{
							date: '2019-10-26',
							info: '打卡'
						},
						{
							date: '2019-10-27',
							info: '签到',
							data: {
								custom: '自定义信息',
								name: '自定义消息头'
							}
						},
						{
							date: '2019-10-28',
							info: '已打卡'
						}
					],
					checked: true,
					attr: 'selected'
				}
			];
			return {
				tags,
				date: '',
				startDate: '',
				endDate: '',
				timeData: {
					clockinfo: '',
					date: '',
					fulldate: '',
					lunar: '',
					month: '',
					range: '',
					year: ''
				},
				selected: [],
				infoShow: false,
				showCalendar: false,
				slmonth: '',
				cases: [{
						name: '标题1',
						tag: '最新消息',
						content: '案例介绍案例介绍案例介绍...',
						image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
						photo: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
						auther: '作者',
						time: '2019-12-11',
						read: 23,
						like: 12,
						msg: 20
					},
					{
						name: '标题2',
						tag: '优惠案例',
						content: '案例介绍案例介绍案例介绍...',
						image: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
						photo: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg',
						auther: '作者',
						time: '2019-12-11',
						read: 23,
						like: 12,
						msg: 20
					}
				]
			}
		},
		props: {

		},

		computed: {
			...mapState({
				active: state => state.active,
			})
		},
		watch: {
			matchLeftWindow: {
				immediate: true,
				handler(newMatches) {
					this.setMatchLeftWindow(newMatches)
				}
			}
		},
		onLoad() {
			setTimeout(() => {
				this.showCalendar = true;
			}, 350);

		},
		methods: {
			...mapMutations(['setMatchLeftWindow', 'setActive']),
			toggle(index) {
				this.tags[index].checked = !this.tags[index].checked;
				this.reckon();
			},
			open() {
				this.reckon();
				this.$refs.calendar.open();
			},
			reckon() {
				if (this.tags[1].checked) {
					this.startDate = this.tags[1].value;
				} else {
					this.startDate = '';
				}
				if (this.tags[2].checked) {
					this.endDate = this.tags[2].value;
				} else {
					this.endDate = '';
				}
				if (this.tags[4].checked) {
					this.date = this.tags[4].value;
				} else {
					this.date = '';
				}
				if (this.tags[6].checked) {
					this.selected = this.tags[6].value
				} else {
					this.selected = []
				}
			},
			change(e) {
				console.log('change 返回:', e);
				this.timeData = e;
				this.infoShow = true;
			},
			confirm(e) {
				console.log('confirm 返回:', e);
				this.timeData = e;
				this.infoShow = true;
			},
			retract() {
				this.infoShow = !this.infoShow;
			},
			onMonthSelect(m) {
				this.slmonth = m;
			}
		}
	}
</script>

<style>
	.left-window-style {
		min-height: calc(100vh - var(--top-window-height));
		background-color: #f8f8f8;
	}

	.second-menu {
		width: 350px;
		background-color: #F8F8F8;
		height: 100vh;
	}

	.icon-image {
		width: 30px;
		height: 30px;
	}
</style>
